<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>充值记录</title>
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/refueling-card.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
</head>
<style>
    html,
    body {
        background: #EEEEEE;
    }

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .mui-table-view:before,.mui-table-view:after {
    position: absolute;
    right: 0;
    left: 0;
    height: 0px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #c8c7cc;
    top: -1px;
}
    .mui-slider-handle{
    	display: flex;
    }
    .left{
    	flex: 5;
    }
    .left>span:nth-child(1){
    	color:#1B1B1B;
    	font-size: 15px;
    }
    .left>span:nth-child(3){
    	color:#7D7D7D;
    	font-size: 13px;
    }
    .right{
    	display: flex;
    	flex: 5;
    	justify-content: flex-end;
    	align-items: center;
    }
    .right>div:nth-child(1){
    	color:#262626;
    	font-size: 15px;
    }
    .right>div:nth-child(1)>span{
    	color:#0A5AFA;
    	font-size: 15px;
    }
    .right>div:nth-child(2){
    	width:8px;
    	height:14px;
    	margin-left:7px;
    }
    .right>div:nth-child(2) img{
    	width:100%;
    	height:100%;
    }
</style>

<body>
    <div class="main">
        <div class="mui-content">
            <ul id="OA_task_1" class="mui-table-view">
                <li class="mui-table-view-cell">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                       <div class="left">
                       		<span>卡号：23456566****</span></br>
                       		<span>2017-11-27 13:00</span>
                       </div>
                       <div class="right">
                       	    <div>充值金额<span>100</span>元</div>
                       	    <div><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></div>
                       </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <div class="mui-slider-right mui-disabled">
                        <a class="mui-btn mui-btn-red">删除</a>
                    </div>
                    <div class="mui-slider-handle">
                       <div class="left">
                       		<span>卡号：23456566****</span></br>
                       		<span>2017-11-27 13:00</span>
                       </div>
                       <div class="right">
                       	    <div>充值金额<span>100</span>元</div>
                       	    <div><img src="../image/icon/ARROWRIGHT@2x.png" alt="" /></div>
                       </div>
                    </div>
                </li>
            </ul>
        </div>

    </div>


</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>

<script type="text/javascript">
    headInner({
        title: "",
        //headleft
        headl: '<a href="javascript:history.back(-1)" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })
    mui.init();
    (function($) {
        //拖拽后显示操作图标，点击操作图标删除元素；
        $('#OA_task_1').on('tap', '.mui-btn', function(event) {
            var elem = this;
            var li = elem.parentNode.parentNode;
            mui.confirm('确认删除该条记录？', '车车侠', btnArray, function(e) {
                if (e.index == 0) {
                    li.parentNode.removeChild(li);
                } else {
                    setTimeout(function() {
                        $.swipeoutClose(li);
                    }, 0);
                }
            });
        });
        var btnArray = ['确认', '取消'];
    })(mui);
</script>

</html>
